//导入样式文件
import { useNavigate } from "react-router-dom"
import "./index.scss"
import { Flex } from 'antd-mobile'

const SearchHeader=({ history, cityName, className })=>{
    // 获取跳转对象
    const navigate=useNavigate()
    return (
        <Flex className={['search-box', className || ''].join(' ')}>
        {/* 左侧白色区域 */}
        <Flex className="search">
          {/* 位置 */}
          <div className="location" onClick={() => navigate('/citylist')}>
            <span className="name">{cityName}</span>
            <i className="iconfont icon-arrow" />
          </div>
  
          {/* 搜索表单 */}
          <div className="form" onClick={() => navigate('/search')}>
            <i className="iconfont icon-seach" />
            <span className="text">请输入小区或地址</span>
          </div>
        </Flex>
        {/* 右侧地图图标 */}
        <i className="iconfont icon-map" onClick={() => navigate('/map')} />
      </Flex>
    )
}

export default SearchHeader